<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/heyui"></script>
    <link rel="stylesheet" href="/scripts/heyui/css/heyui.blue.theme.css">
    <link rel="stylesheet" href="/styles/global.css">
    <script src="/scripts/lib.js"></script>
</head>

<body>
    <div id="app">
        <div class="page-body">
            <div class="h-panel">
                <div class="h-panel-bar">
                    <span class="h-panel-title">系统菜单编辑</span>
                </div>
                <div class="h-panel-body">
                    <h-form v-width="500" :label-width="110" :model="model" :rules="validation" ref="form" :top="0.2"
                        show-error-tip>

                        <h-form-item label="菜单名称" prop="Name">
                            <input type="text" v-model="model.Name" placeholder="限制10个字以内" v-wordlimit='10' />
                        </h-form-item>

                        <h-form-item label="菜单地址" prop="Url">
                            <textarea rows="3" v-autosize v-wordcount="50" v-model="model.Url"></textarea>
                        </h-form-item>

                        <h-form-item label="父级菜单" prop="ParentId">
                            <h-treepicker :option="param" v-model="model.ParentId" toggle-on-select="true"
                                use-confirm="true" filterable>
                            </h-treepicker>
                        </h-form-item>

                        <h-form-item label="菜单排序" prop="SortId">
                            <input type="text" v-model="model.SortId" />
                        </h-form-item>

                        <h-form-item :no-padding="true" single>
                            <h-button color="primary" :loading="isLoading" @click="submit">保存</h-button>
                            <button-history></button-history>
                        </h-form-item>

                    </h-form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            param: {
                keyName: 'ID',
                parentName: 'ParentId',
                titleName: 'Name',
                dataMode: 'list',
                datas: []
            },
            model: {
                ID: 0,
                Name: "",
                Icon: "",
                ParentId: 0,
                SortId: 0,
                Url: ""
            },
            isLoading: false,
            validation: {
                required: [
                    'Name',
                    'Url',
                    'SortId'
                ],
                int: ['SortId']
            }
        },
        methods: {
            submit() {
                let _this = this;
                let validResult = _this.$refs.form.valid();
                if (!validResult.result) {
                    return;
                }
                if (_this.model.ParentId == null) {
                    _this.model.ParentId = 0;
                }

                var url = "SysMenu/insert";
                if (_this.model.ID > 0) {
                    url = "SysMenu/update";
                }
                $http.insertOrUpdate(url, _this.model);
            },
            loadModelData() {
                var id = this.model.ID;
                if (id <= 0) {
                    return;
                }
                var _this = this;
                $http.post("SysMenu/singleData", { ID: id }, function (data) {
                    _this.model = data;
                })
            },
            loadTreeData() {
                var _this = this;
                $http.post("SysMenu/listData", {}, function (data) {
                    _this.param.datas = data;
                })
            }
        },
        mounted() {
            var id = this.$url.query("id");
            if (id != "") {
                this.model.ID = id;
            }
            this.loadTreeData();
            this.loadModelData();
        },
    })

</script>